<template>
  <el-dialog
    top="30px"
    width="800px"
    title="联保受理"
    append-to-body
    :close-on-click-modal="false"
    :before-close="beforeClose"
    :visible.sync="visible"
  >
    <h5>项目基本信息</h5>
    <table class="table table-vertical-middle table-borderless">
      <tbody>
        <tr>
          <td width="15%">项目名称：</td>
          <td width="35%">{{ relatedData.customer_name || relatedData.customer_name }}</td>
          <td width="15%">项目地址：</td>
          <td width="35%">{{ relatedData.address }}</td>
        </tr>
        <tr>
          <td>负责人：</td>
          <td>{{ relatedData.corp_name }}</td>
          <td>联系电话：</td>
          <td>{{ relatedData.mobile_no }}</td>
        </tr>
        <tr>
          <td>申请金额：</td>
          <td>{{ relatedData.apply_funds || '-' }} 万元</td>
          <td>申请年限：</td>
          <td>{{ relatedData.load_years || '-' }} 年</td>
        </tr>
        <tr>
          <td>贷款用途：</td>
          <td colspan="3">{{ relatedData.funds_use_dir || '-' }}</td>
        </tr>
        <tr v-if="viewMode">
          <td colspan="2">
            <div class="d-flex align-items-center">
              <div>项目负责人A角：</div>
              <div>{{ relatedData.city_res_a_name }}</div>
            </div>
          </td>
          <td colspan="2">
            <div class="d-flex align-items-center">
              <div>项目负责人B角：</div>
              <div>{{ relatedData.city_res_b_name || '-' }}</div>
            </div>
          </td>
        </tr>
        <tr v-else>
          <td colspan="2">
            <div class="d-flex align-items-center">
              <div>项目负责人A角：</div>
              <div>
                <select-staff
                  v-model="editData.city_res_a"
                  class="form-control-ml"
                  placeholder="请选择项目负责人: A角"
                ></select-staff>
              </div>
            </div>
          </td>
          <td colspan="2">
            <div class="d-flex align-items-center">
              <div>项目负责人B角：</div>
              <div>
                <select-staff
                  v-model="editData.city_res_b"
                  class="form-control-ml"
                  placeholder="请选择项目负责人: B角"
                ></select-staff>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="text-center mt-3" v-if="!viewMode">
      <el-button @click="handlePass" type="primary" :loading="submitLoading" class="btn-long">
        受理
      </el-button>
      <!-- <el-button @click="handleView"
                 type="danger"
                 class="btn-long">拒绝</el-button> -->
    </div>
    <el-dialog
      append-to-body
      :visible.sync="rejectVisible"
      title="不受理说明"
      :close-on-click-modal="false"
    >
      <div class="d-flex align-items-center mb-3">
        <div>拒绝人：</div>
        <div>
          {{ rejectName }}
        </div>
      </div>
      <div class="d-flex">
        <div style="width: 100px">说明内容：</div>
        <div class="form-control-ml">
          <el-input
            v-model="editData.approval_gua_confuse_des"
            rows="5"
            placeholder="输入说明内容"
            type="textarea"
          ></el-input>
        </div>
      </div>
      <div class="text-center mt-2">
        <el-button @click="handleReject" type="primary" :loading="submitLoading" class="btn-long">
          完成
        </el-button>
        <el-button @click="handleClose" class="btn-long">取消</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
import SelectStaff from '@/components/select/SelectStaff'
import { mapGetters } from 'vuex'
export default {
  components: {
    SelectStaff,
  },
  props: {
    visible: Boolean,
    relatedData: {
      type: Object,
      default() {
        return {}
      },
    },
    viewMode: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      rejectVisible: false,
      editData: {},
      submitLoading: false,
    }
  },
  computed: {
    ...mapGetters(['userId', 'user', 'org']),
    rejectName() {
      return this.org.orgName + '-' + this.user.realName
    },
  },
  watch: {
    relatedData: {
      handler: function () {
        this.editData = {
          city_res_a: this.relatedData.city_res_a,
          city_res_b: this.relatedData.city_res_b,
          approval_gua_confuse_des: this.relatedData.approval_gua_confuse_des,
        }
      },
    },
  },
  mounted() {},
  created() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },
    handleClose() {
      this.rejectVisible = false
    },
    validator() {
      if (!this.editData.city_res_a) {
        this.$message.warning('请选择项目负责人A角')
        return false
      }
      if (!this.editData.city_res_b) {
        this.$message.warning('请选择项目负责人B角')
        return false
      }
      if (this.editData.city_res_a === this.editData.city_res_b) {
        this.$message.warning('项目负责人A、B角不能是同一个人， 请重新选择')
        return false
      }
      return true
    },
    handleView() {
      this.rejectVisible = true
    },
    handlePass() {
      if (!this.validator()) {
        return
      }
      this.submitLoading = true
      this.$api
        .updateData(this.$serviceName, 'customer_related', this.relatedData.customer_related_id, {
          approval_gua_person: this.userId,
          is_approval_gua_date: this.$utils.dateFormat(new Date()),
          city_res_a: this.editData.city_res_a,
          city_res_b: this.editData.city_res_b,
          is_approval_gua: '1',
        })
        .then(() => {
          this.$emit('success', true)
          this.$message.success('联保受理成功')
          this.beforeClose()
        })
        .catch(() => {
          this.$message.error('联保受理失败')
        })
        .finally(() => {
          this.submitLoading = false
        })
    },
    handleReject() {
      this.submitLoading = true
      this.$api
        .updateData(this.$serviceName, 'customer_related', this.relatedData.customer_related_id, {
          approval_gua_person: this.userId,
          is_approval_gua_date: this.$utils.dateFormat(new Date()),
          is_approval_gua: '2',
          approval_gua_confuse_des: this.editData.approval_gua_confuse_des,
        })
        .then(() => {
          this.$emit('success', true)
          this.handleClose()
          this.$message.success('已拒绝')
          this.beforeClose()
        })
        .catch(() => {
          this.$message.error('拒绝失败')
        })
        .finally(() => {
          this.submitLoading = false
        })
    },
  },
}
</script>
<style lang="scss" scoped></style>
